<template>
    <div class="manage-notice">
        <el-dialog title="公告管理" width="850px" v-model="trafficStore.manageNoticeVisible" class="manage-notice-dialog">
            <hr style="margin-bottom: 10px;" color="#f0f0f0">
            <el-table :data="noticeList" style="width: 100%">
                <el-table-column prop="time" label="发布时间" width="250px" />
                <el-table-column prop="title" label="公告标题" width="200px" />
                <el-table-column prop="content" label="公告内容" width="200px  " />
                <el-table-column prop="id" label="操作" width="150px">
                    <template #default="scope">
                        <el-button type="danger" :icon="Delete" circle @click="dellist(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>

    </div>
</template>

<script setup>
import { ref, onMounted } from "vue"
import { useTrafficStore } from "@/stores/counter";
import { getNoticeHttp, delNoticeHttp } from '@/request/Http';
import { Delete } from '@element-plus/icons-vue'
import {
    ElButton,
} from 'element-plus'
const trafficStore = useTrafficStore()
const noticeList = ref([])
const dellist = async (id) => {
    await delNoticeHttp(id)
    // 重新请求公告列表
    const res = await getNoticeHttp()
    noticeList.value = res.result
    noticeList.value.forEach(item => {
        item.content = item.content.slice(0, 10) + '...'
    })
}
onMounted(async () => {
    const res = await getNoticeHttp()
    noticeList.value = res.result,
        noticeList.value.forEach(item => {
            item.content = item.content.slice(0, 10) + '...'
        })
})

</script>

<style scoped>
.el-dialog__title {
    color: #303133;
    font-size: 18px;
    font-weight: bolder;
}
</style>